<template>
	<el-form :model="UserInfo" label-width="100px">
		<el-form-item label="账号" prop="UserID">
			<el-input v-model="UserInfo.UserID" disabled />
		</el-form-item>
		<el-form-item label="角色" prop="UserRoles">
			<el-select v-model="UserInfo.RoleCodes" style="width: 100%" multiple>
				<el-option v-for="item in UserRoles" :value="item.RoleCode" :label="item.RoleName" :key="item.RoleCode" />
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button @click="submit" type="primary">确定</el-button>
			<el-button @click="cancel">取消</el-button>
		</el-form-item>
	</el-form>
</template>
<script lang="ts" setup>

import { httpReqeustApi } from '/@/api/linxyun/base';
import { ElMessage } from 'element-plus';

const httpReqeust = httpReqeustApi();
const props = defineProps<{UserInfo:Record<string, any>;UserRoles:any}>();
const emit = defineEmits(["close"])
const { UserInfo } = toRefs(props);

/**
 * @description: 点击确定按钮提交
 */
const submit = () =>{
  let allUserRoles =UserInfo.value.RoleCodes.join(',')
	if (allUserRoles[allUserRoles.length - 1] === ',') {
		allUserRoles.slice(0, allUserRoles.length - 1)
	}
  const finallyParam ={
		UserID : UserInfo.value.UserID,
		UserRoles : allUserRoles
	}
  httpReqeust.Post('updateUserRole',finallyParam).then((result:any) => {
    if(result.msg === 'success' && result.code== '0000'){
      ElMessage({
		    type: 'success',
			  message: '修改成功',
		  }); 
    }else{
      ElMessage({
		    type: 'error',
			  message: '修改失败',
		  }); 
    }
    cancel()
  }).catch((err) => {
    ElMessage({
		  type: 'error',
			message: '修改失败',
		}); 
  });
}
/**
 * @description: 点击取消按钮后关闭弹窗
 */
const cancel = ()=>{
  emit("close",false)
}
</script>
